<template>
  <div class="mainBox">
    <el-descriptions class="carOwnerInfo" :column="4" border>
      <el-descriptions-item label="申请人" align="center">
        {{ detailModel.data.applyUser }}
      </el-descriptions-item>
      <el-descriptions-item label="商品" align="center">
        {{ detailModel.data.goodsName }}
      </el-descriptions-item>
      <el-descriptions-item label="申请数量" align="center">
        {{ detailModel.data.supplyNum }}
      </el-descriptions-item>
      <el-descriptions-item label="押金" align="center">
        {{ detailModel.data.singlePrice }}
      </el-descriptions-item>
      <el-descriptions-item label="物资总金额" align="center">
        {{ detailModel.data.totalPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="订单状态" align="center">
        {{ judgeFrontStateCode(detailModel.data.frontStateCode) }}
      </el-descriptions-item>
      <el-descriptions-item label="打款凭证" align="center">
        <el-button
          link
          type="primary"
          size="small"
          @click="imgDialog = true"
          v-if="detailModel.data.paymentVoucherUrl"
        >
          {{ "查看" }}
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
    <div
      class="exchangeInfo"
      v-for="item in detailModel.data.mailInfos"
      :key="item.mailInfoId"
    >
      <el-descriptions :column="4" direction="vertical" border>
        <el-descriptions-item label="收货人" width="12%" align="center">
          {{ item.receiveName }}
        </el-descriptions-item>
        <el-descriptions-item label="数量" width="15%" align="center">
          {{ item.goodsNum }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号码" width="15%" align="center">
          {{ item.receivePhone }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址" align="center">
          {{ item.address }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="物资备注" align="center">
          <span v-if="isEdit[item.mailInfoId]">{{ item.goodsNote }}</span>
          <el-select
            v-model="deliveryModel[item.mailInfoId].mailInfo.goodsNote"
            placeholder="请选择物资备注"
            v-else
          >
            <el-option
              v-for="item in noteArr.data"
              :value="item"
              :label="item"
              :key="item"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="快递信息" align="center">
          <div class="desInfo" v-if="isEdit[item.mailInfoId]">
            <span class="infoText">{{ item.expressCo }}</span>
            <span class="infoText">{{ item.expressNo }}</span>
            <div v-if="detailModel.data.frontStateCode != 5">
              <el-button
                type="primary"
                color="#ea5b24"
                @click="delivery(item, 2)"
                >编辑</el-button
              >
            </div>
          </div>
          <div class="desInfo" v-else>
            <div style="width: 23%; margin-right: 2%">
              <el-select
                v-model="deliveryModel[item.mailInfoId].mailInfo.expressCo"
                placeholder="请选择快递名称"
              >
                <el-option
                  v-for="item in logisticsArr.data"
                  :value="item"
                  :label="item"
                  :key="item"
                />
              </el-select>
            </div>
            <div style="width: 45%; margin-right: 2%">
              <el-input
                v-model.trim="deliveryModel[item.mailInfoId].mailInfo.expressNo"
                placeholder="请输入快递单号"
              />
            </div>
            <div>
              <el-button
                type="primary"
                color="#ea5b24"
                @click="delivery(item, 1)"
                :disabled="detailModel.data.frontStateCode === 3"
                >确定</el-button
              >
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border>
        <el-descriptions-item label="备注" width="200px" align="center">
          <span v-if="isEdit[item.mailInfoId]">{{ item.otherRemark }}</span>
          <div style="width: 90%; margin-right: 2%" v-else>
            <el-input
              v-model.trim="deliveryModel[item.mailInfoId].mailInfo.otherRemark"
              placeholder="请输入备注"
              maxlength="50"
            />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="btnBox">
      <el-button
        type="primary"
        color="#ea5b24"
        @click="delivery(null, 3)"
        :disabled="detailModel.data.frontStateCode === 3"
        v-if="
          detailModel.data.mailInfos.length > 0 &&
          detailModel.data.frontStateCode != 5
        "
        >完成发货</el-button
      >
      <el-button type="primary" color="#ea5b24" @click="emit('packConfigBack')"
        >返回</el-button
      >
    </div>

    <!-- 图片展示dialog -->
    <el-dialog
      v-model="imgDialog"
      width="500px"
      draggable
      center
      :show-close="false"
    >
      <div v-if="imgDialog">
        <el-image
          :src="detailModel.data.paymentVoucherUrl"
          :preview-src-list="srcList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  findSupplyOrderByIdApi,
  getLogisticsApi,
  deliverOrderConfirmApi,
  getNoteListApi,
  finishConfirmApi,
} from "../../../api/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 父级传递过来的参数
const props = defineProps({
  detaildData: Object,
});
//父级传递的方法
const emit = defineEmits(["packConfigBack"]);

// 照片dialog控制
const imgDialog = ref(false);
const srcList = [];

// 订单详情数据模型
let detailModel: any = reactive({
  data: {
    orderId: null,
    applyUser: null,
    goodsName: null,
    supplyNum: null,
    singlePrice: null,
    totalPrice: null,
    frontStateCode: null,
    // auditState: null,
    // shipmentSate: null,
    paymentVoucherUrl: null,
    mailInfos: [],
  },
});

// 物流发货模型
let deliveryModel: any = reactive({});
// 判断是否编辑
let isEdit: any = reactive({});

// 判断发货状态显示
const judgeFrontStateCode = (frontStateCode) => {
  switch (frontStateCode) {
    case 1:
      return "待上传凭证";
    case 2:
      return "待审核";
    case 3:
      return "审核不通过";
    case 4:
      return "待发货";
    case 5:
      return "已发货";
    default:
      return "";
  }
};

// 查询账单详情信息
const findOrderInfo = () => {
  findSupplyOrderByIdApi({ orderId: props.detaildData.orderId }).then((res) => {
    if (res.data.code === 2000) {
      if (res.data.data) {
        detailModel.data = { ...res.data.data };
        srcList.push(detailModel.data.paymentVoucherUrl);
        if (detailModel.data.mailInfos) {
          detailModel.data.mailInfos.forEach((item) => {
            deliveryModel[item.mailInfoId] = {
              supplyOrderId: null,
              mailInfo: {
                mailInfoId: null,
                goodsNote: null,
                expressCo: null,
                expressNo: null,
                otherRemark: null,
              },
            };
            if (item.goodsNote || item.expressCo || item.expressNo) {
              isEdit[item.mailInfoId] = true;
            } else {
              isEdit[item.mailInfoId] = false;
            }
          });
        }
      }
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 查询物资备注列表
let noteArr: any = reactive([]);
const findNoteList = () => {
  getNoteListApi().then((res) => {
    if (res.data.code === 2000) {
      noteArr.data = res.data.data;
    } else {
      ElMessage.error("查询物流名称失败");
    }
  });
};

// 查询物流名称列表
let logisticsArr: any = reactive([]);
const findLogistics = () => {
  getLogisticsApi().then((res) => {
    if (res.data.code === 2000) {
      logisticsArr.data = res.data.data;
    } else {
      ElMessage.error("查询物流名称失败");
    }
  });
};

// 物流发货确认
// type: 1新增 2修改 3完成发货
const delivery = (item, type) => {
  if (item) {
    if (type === 1) {
      if (detailModel.data.frontStateCode != 4) {
        ElMessage.warning("订单未审核通过.");
        return;
      }
      if (!deliveryModel[item.mailInfoId].mailInfo.goodsNote) {
        ElMessage.warning("请输入物资备注.");
        return;
      }
      if (!deliveryModel[item.mailInfoId].mailInfo.expressCo) {
        ElMessage.warning("请选择快递名称.");
        return;
      }
      if (!deliveryModel[item.mailInfoId].mailInfo.expressNo) {
        ElMessage.warning("请输入快递单号.");
        return;
      }
      deliveryModel[item.mailInfoId].supplyOrderId = detailModel.data.orderId;
      deliveryModel[item.mailInfoId].mailInfo.mailInfoId = item.mailInfoId;
      deliverOrderConfirmApi(deliveryModel[item.mailInfoId]).then((res) => {
        if (res.data.code === 2000) {
          ElMessage({
            message: "成功.",
            type: "success",
          });
          findOrderInfo();
        } else {
          switch (res.data.code) {
            case 4001:
              ElMessage.error("快递信息不能为空.");
              break;
            default:
              ElMessage.error("失败.");
              break;
          }
        }
      });
    }
    if (type === 2) {
      isEdit[item.mailInfoId] = false;
      deliveryModel[item.mailInfoId].mailInfo.goodsNote = item.goodsNote;
      deliveryModel[item.mailInfoId].mailInfo.expressCo = item.expressCo;
      deliveryModel[item.mailInfoId].mailInfo.expressNo = item.expressNo;
      deliveryModel[item.mailInfoId].mailInfo.otherRemark = item.otherRemark;
    }
  } else {
    if (type == 3) {
      ElMessageBox.confirm("是否确认完成发货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        finishConfirmApi({ supplyOrderId: detailModel.data.orderId }).then(
          (res) => {
            if (res.data.code === 2000) {
              ElMessage({
                message: "已完成发货.",
                type: "success",
              });
              findOrderInfo();
            } else {
              switch (res.data.code) {
                case 4001:
                  ElMessage.error("发货快递信息不全，无法完成发货.");
                  break;
                case 4002:
                  ElMessage.error("邮寄总数量与订单发货量不符，无法完成发货.");
                  break;
                default:
                  ElMessage.error("失败.");
                  break;
              }
            }
          }
        );
      });
    } else {
      ElMessage.error("系统错误.");
      return;
    }
  }
};

onMounted(() => {
  findNoteList();
  findLogistics();
  findOrderInfo();
});
</script>

<style scoped>
.mainBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carOwnerInfo {
  width: 100%;
  margin-bottom: 60px;
}

.exchangeInfo {
  width: 100%;
  margin-bottom: 30px;
}

.btnBox {
  display: flex;
  justify-content: space-between;
  width: 250px;
  margin-top: 30px;
}

.desInfo {
  display: flex;
  justify-content: center;
}

.imgBtn {
  margin-left: 9%;
  font-size: 14px;
}

.infoText {
  margin-right: 5%;
}
</style>
